const topApp = {
  template:`
  <div class="top top-optimized">
    <div class="py-container">
      <div class="shortcut">
        <ul class="fl">
          <li class="f-item"><i class="iconfont icon-shop" style="margin-right: 5px; vertical-align: middle;"></i>ShopEasy</li>
          <li class="f-item login-register" v-if="!user">
            <a href="/login.html" class="a_hover" onmouseover="this.style.color='#e82633'; this.style.textDecoration='none'" onmouseout="this.style.color=''; this.style.textDecoration=''">请登录</a>　
            <a href="/register.html"  class="a_hover" onmouseover="this.style.color='#e82633'; this.style.textDecoration='none'" onmouseout="this.style.color=''; this.style.textDecoration=''">免费注册</a>
          </li>
          <li class="f-item" v-else>
            <i class="iconfont icon-ren" style="margin-right: 5px; vertical-align: middle;"></i>欢迎您 <span class="welcome-message">{{user.username}}</span>
            <span @click="util.logout()"><a href="#"   class="a_hover" onmouseover="this.style.color='#e82633'; this.style.textDecoration='none'" onmouseout="this.style.color=''; this.style.textDecoration=''">退出登录</a></span>
          </li>
        </ul>
        <ul class="fr nav-links">
          <li class="f-item"><i class="iconfont icon-shouye" style="margin-right: 5px; vertical-align: middle;"></i><a href="/">首页</a></li>
          <li class="f-item space"></li>
          <li class="f-item"><i class="iconfont icon-gouwuche" style="margin-right: 5px; vertical-align: middle;"></i><a href="/cart.html">我的购物车</a></li>
          <li class="f-item space"></li>
          <li class="f-item"><i class="iconfont icon-ren" style="margin-right: 5px; vertical-align: middle;"></i><a href="/message.html">我的信息</a></li>
        </ul>
      </div>
    </div>
  </div>
  `,
  data(){
    return {
      user: null,
      util
    }
  },
  mounted(){
    this.user = this.util.store.get("user-info")
  },
  methods: {

  },
}

Vue.component("top", topApp);